<template>
  <div class="cart">
    <div class="cart-head border-bottom">
      <span class="red">{{ editor }}</span>
      <span>购物车</span>
      <span></span>
    </div>

    <div class="cart-content">
      <div class="cart-img" v-if="textArry.length === 0">
        <img src="/cd1.7808faf.png" />
      </div>
      <div class="content-text" v-else>
        <div class="cart-container" v-for="(item,index) in textArry" :key="index" >
          <section>
            <input type="checkbox"  v-model="item.checked"  @click="opbox(index)" ref="ck">
          </section> 
          <section class="cart-title">
            <p>
              <img :src="item.basicInfo.pic" alt="">
            </p>
            <ul>
              <li>{{item.basicInfo.name}}</li>
              <li>{{item.basicInfo.minPrice}}</li>
              <li>{{item.basicInfo.recommendStatusStr}}</li>
            </ul>
          </section>
          <step-device class="stepdevice" height="0.6rem" width="2rem" :count=" item.num" ></step-device>
        </div>

        <div class="cart-account border-top">
          <section >
            <input type="checkbox" v-model="iptcheck" @click="ckall">
            全选
          </section>
          <section class="red">
            合计：￥<span>{{ zj }}</span>
          </section>
          <section class="cart-shop">
            下单
          </section>
        </div>

      </div>
    </div>

    <div class="like">
      <like :list="likeArry"></like>
    </div>
  </div>
</template>

<script>
import StepDevice from '../../components/bottomNav/StepDevice.vue';
import like from "../../components/list/like.vue";
import { getlike } from "../../utils/api";

export default {
  components: { like, StepDevice },
  name: "cart",
  data() {
    return {
      editor: "编辑",
      likeArry: [],
      textArry: [],
      iptcheck:false
    };
  },

  created() {
    getlike().then((res) => {
      console.log(res.length);
      for (let i = 0; i < 6; i++) {
        let num = this.random(res.length);
        this.likeArry.push(res[num]);
      }
    });
    this.textArry = this.$store.state.cart;
  },
  methods: {
    random(n) {
      return parseInt(Math.random() * (n + 1));
    },
    ckall(){
      this.textArry.forEach(item=>{
        item.checked = !this.iptcheck
      })
    },
    opbox(i){
      var n = 0
      this.textArry[i].checked = !this.textArry[i].checked
      this.textArry.forEach(item=>{
           if(item.checked == true){
            n++
           }
      })
      if(n === this.textArry.length){
          this.iptcheck = true
      }else{
          this.iptcheck = false
      }
    }
  },
  computed:{
      zj(){
        var num = 0
        this.textArry.forEach(item=>{
            if (item.checked) {
             num += item.basicInfo.minPrice * item.num
            }
        })
        return num
      }
  },
};
</script>

<style lang="scss" scoped>
.cart {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  .cart-head {
    width: 100%;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.2rem;
    font-size: 0.28rem;
  }
  .cart-content {
    width: 100%;
    .cart-img {
      width: 100%;
      height: 7rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content-text {
      width: 100%;
    }
  }
}
.cart-container{
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  position: relative;
  .cart-title{
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.22rem;
    flex: start;
    p{
      width: 1.5rem;
      height: 1.5rem;
      img{
        width: 1.5rem;
        height: 1.5rem;
      }
    }
    ul{
      width: clac( 100% - 1.5);
      height: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 0.2rem;
    }
  }
}
.cart-account{
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 1.2rem;
  left: 0;
  background-color: white;
  padding: 0 0 0 0.2rem;
  z-index: 999;
  font-size: 0.26rem;
  .cart-shop{
    width: 2.5rem;
    height: 100%;
    background-color: rgb(139, 0, 0);
    color: white;
    line-height: 1rem;
    text-align: center;
    font-size: 0.30rem;
  }
} 
.stepdevice{
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
}
</style>
